<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			div{
				/* 有宽没高：设置高宽 */
				width: 300px;
				height: 300px;
				border: 1px solid red;
				/* 盒/框模型 ：页面任何元素都存在盒模型中 
						组成：外边距+边框+内边距+内容  
					  外边距：margin属性 与border属性方向一致
					   语法：属性值1个，代表四个方向，顺时针：上 右 下 左
							属性值2个，代表4个方向，顺时针：上下  左右
											  自适应居中：0 auto
						属性值3个，代表4个方向，顺时针：上 右左 下
					外边距-方向属性：
					margin-left：数值px；
					margin-right：数值px；
					margin-top：数值；
					margin-bottom：数值px；
						 */
						margin: 100px;/* 上 右 下 左 */
						margin:/* 上下 右左 */
						margin:10px 20px 100px; /* 上 右左 下*/
						margin:10px 20px 30px 100px 上 右 左 下 */
						/* 自适应居中 */
						margin 0 auto;
						/* 元素向下移动100个像素 */
						margin-top:100px;
						/* 内边距：padding属性与margin属性使用方法类似
						 特点：
						 语法：属性值1个，代表四个方向，顺时针：上 右 下 左
							  属性值2个，代表4个方向，顺时针：上下  左右
											  自适应居中：0 auto
						      属性值3个，代表4个方向，顺时针：上 右左 下
							  属性值4个，代表四个方向，顺时针：上 右 下 左 	
						 内边距-方向与外边距-方向一致	  				 
						*/	  				 
						padding: 50px;
						padding: 50px 100px;
		  				padding: 50px 100px 200px;
						padding: 50px 100px 200px 300px;
					}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>